<template>
  <div id="my-body">
    <div class="container">
      <div class="left-panel">
        <div class="logo">
          秒解几何
        </div>
        <div class="welcome-text">互动数学学习平台</div>
        <div class="welcome-desc">
          通过可视化概念、逐步解题和进度跟踪，让数学学习更轻松有趣
        </div>
        <div class="features">
          <div class="feature-item">
            <div class="feature-icon">✓</div>
            <span>可视化几何学习</span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">✓</div>
            <span>智能解题引导</span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">✓</div>
            <span>个性化学习路径</span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">✓</div>
            <span>实时学习反馈</span>
          </div>
        </div>
      </div>

      <div class="right-panel">
        <div class="form-header">
          <h2 class="form-title">{{ isLoginForm ? '登录账户' : '创建账户' }}</h2>
          <p class="form-subtitle">{{ isLoginForm ? '欢迎回来，继续你的数学学习之旅' : '加入我们，开始你的数学学习之旅' }}</p>
        </div>

        <div class="form-container">
          <!-- 登录表单 -->
          <form class="form" :class="{ active: isLoginForm }" @submit.prevent="handleLogin">
            <div class="form-group">
              <label for="loginEmail">邮箱地址</label>
              <input type="email" id="loginEmail" v-model="loginForm.email" placeholder="请输入您的邮箱" required>
              <div class="error-message" v-if="loginErrors.email">{{ loginErrors.email }}</div>
            </div>

            <div class="form-group">
              <label for="loginPassword">密码</label>
              <input type="password" id="loginPassword" v-model="loginForm.password" placeholder="请输入您的密码" required>
              <div class="error-message" v-if="loginErrors.password">{{ loginErrors.password }}</div>
            </div>

            <div class="checkbox-group">
              <input type="checkbox" id="rememberMe" v-model="loginForm.rememberMe">
              <label for="rememberMe">记住我</label>
              <div style="margin-left: auto;">
                <a href="#" @click.prevent="showForgotPassword">忘记密码？</a>
              </div>
            </div>

            <button type="submit" class="submit-btn">登录</button>

            <div class="divider">
              <span>或</span>
            </div>

            <div class="social-login">
              <button type="button" class="social-btn" @click="socialLogin('wechat')">
                <span>📱</span> 微信登录
              </button>
              <button type="button" class="social-btn" @click="socialLogin('alipay')">
                <span>🅰️</span> 支付宝登录
              </button>
            </div>
          </form>

          <!-- 注册表单 -->
          <form class="form" :class="{ active: !isLoginForm }" @submit.prevent="handleRegister">

            <div class="form-group">
                <label for="userName">用户名</label>
                <input type="text" id="userName" v-model="registerForm.userName" placeholder="请输入您的用户名" required>
                <div class="error-message" v-if="registerErrors.userName">{{ registerErrors.userName }}</div>
              </div>

            <div class="form-group">
              <label for="registerEmail">邮箱地址</label>
              <input type="email" id="registerEmail" v-model="registerForm.email" placeholder="请输入您的邮箱" required>
              <div class="error-message" v-if="registerErrors.email">{{ registerErrors.email }}</div>
            </div>

            <div class="form-group">
              <label for="phone">手机号码</label>
              <input type="tel" id="phone" v-model="registerForm.phone" placeholder="请输入您的手机号码" required>
              <div class="error-message" v-if="registerErrors.phone">{{ registerErrors.phone }}</div>
            </div>

            <div class="form-group">
              <label for="schoolName">学校名称</label>
              <input type="text" id="schoolName" v-model="registerForm.schoolName" placeholder="请输入您的学校名称" required>
              <div class="error-message" v-if="registerErrors.schoolName">{{ registerErrors.schoolName }}</div>
            </div>

            <div class="form-group">
              <label>年级选择</label>
              <div class="grade-options">
                <div class="grade-option" v-for="grade in gradeOptions" :key="grade.value"
                  :class="{ selected: registerForm.grade === grade.value }" @click="registerForm.grade = grade.value">
                  {{ grade.label }}
                </div>
              </div>
              <input type="hidden" id="selectedGrade" :value="registerForm.grade" required>
              <div class="error-message" v-if="registerErrors.grade">{{ registerErrors.grade }}</div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label for="registerPassword">密码</label>
                <input type="password" id="registerPassword" v-model="registerForm.password" placeholder="请输入密码（至少6位）"
                  required>
                <div class="error-message" v-if="registerErrors.password">{{ registerErrors.password }}</div>
              </div>
              <div class="form-group">
                <label for="confirmPassword">确认密码</label>
                <input type="password" id="confirmPassword" v-model="registerForm.confirmPassword" placeholder="请再次输入密码"
                  required>
                <div class="error-message" v-if="registerErrors.confirmPassword">{{ registerErrors.confirmPassword }}
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="mathLevel">数学基础水平</label>
              <select id="mathLevel" v-model="registerForm.mathLevel" required>
                <option value="">请选择您的数学水平</option>
                <option value="beginner">基础较弱</option>
                <option value="intermediate">中等水平</option>
                <option value="advanced">基础较好</option>
                <option value="excellent">数学优秀</option>
              </select>
              <div class="error-message" v-if="registerErrors.mathLevel">{{ registerErrors.mathLevel }}</div>
            </div>

            <div class="checkbox-group">
              <input type="checkbox" id="agreeTerms" v-model="registerForm.agreeTerms" required>
              <label for="agreeTerms">我同意 <a @click.prevent="showModal('terms')">用户协议</a> 和 <a
                  @click.prevent="showModal('privacy')">隐私政策</a></label>
              <div class="error-message" v-if="registerErrors.agreeTerms">{{ registerErrors.agreeTerms }}</div>
            </div>

            <div class="checkbox-group">
              <input type="checkbox" id="subscribedUpdates" v-model="registerForm.subscribedUpdates">
              <label for="subscribedUpdates">订阅学习资源和产品更新</label>
            </div>

            <button type="submit" class="submit-btn">创建账户</button>
          </form>
        </div>

        <div class="form-switch">
          <span>{{ isLoginForm ? '还没有账户？' : '已经有账户了？' }}</span>
          <button type="button" @click="toggleForm">{{ isLoginForm ? '立即注册' : '立即登录' }}</button>
        </div>
      </div>
    </div>

    <!-- Modal弹窗 -->
    <div class="modal" :class="{ show: showModalFlag }" @click.self="closeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">{{ activeModalTitle }}</h3>
          <button class="modal-close" @click="closeModal">&times;</button>
        </div>

        <div class="modal-tabs">
          <button class="modal-tab" :class="{ active: activeModalSection === 'terms' }"
            @click="showModalSection('terms')">用户协议</button>
          <button class="modal-tab" :class="{ active: activeModalSection === 'privacy' }"
            @click="showModalSection('privacy')">隐私政策</button>
        </div>

        <div class="modal-body">
          <!-- 用户协议内容 -->
          <div class="modal-section" :class="{ active: activeModalSection === 'terms' }">
            <h1>秒解几何用户协议</h1>

            <div class="highlight">
              <strong>重要提示：</strong>请您在使用秒解几何平台服务前，仔细阅读并充分理解本协议的全部条款。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
            </div>

            <h2>1. 协议的范围</h2>
            <p>本协议是您与秒解几何平台（以下简称"本平台"）之间关于您使用本平台服务所订立的协议。本协议适用于您使用本平台提供的所有服务，包括但不限于在线数学学习、几何解题、互动练习等功能。</p>

            <h2>2. 服务内容</h2>
            <p>本平台致力于为用户提供优质的数学学习服务，主要包括：</p>
            <ul>
              <li>可视化几何概念展示和学习</li>
              <li>智能化解题步骤引导</li>
              <li>个性化学习路径规划</li>
              <li>实时学习进度跟踪</li>
              <li>在线互动练习和测评</li>
              <li>学习资源和教学材料</li>
            </ul>

            <h2>3. 用户注册与账户管理</h2>
            <h3>3.1 注册条件</h3>
            <p>用户在注册时应当符合以下条件：</p>
            <ul>
              <li>具有完全民事行为能力的自然人</li>
              <li>未满18周岁的用户应在法定监护人的同意下使用本服务</li>
              <li>提供真实、准确、完整的个人信息</li>
              <li>遵守国家相关法律法规和本协议约定</li>
            </ul>

            <h3>3.2 账户安全</h3>
            <p>用户有义务妥善保管账户信息，包括但不限于用户名、密码等。因用户保管不善造成的损失由用户自行承担。如发现账户被他人使用，应立即通知本平台。</p>

            <h2>4. 用户行为规范</h2>
            <p>用户在使用本平台服务时，应当遵守以下行为规范：</p>
            <ul>
              <li>不得发布违法、违规、不当或有害的信息</li>
              <li>不得恶意攻击或破坏本平台的正常运行</li>
              <li>不得侵犯他人的知识产权或其他合法权益</li>
              <li>不得进行任何形式的作弊或不当竞争行为</li>
              <li>不得传播虚假信息或进行误导性宣传</li>
              <li>尊重其他用户，维护良好的学习环境</li>
            </ul>

            <h2>5. 知识产权</h2>
            <p>本平台的所有内容，包括但不限于文字、图片、音频、视频、软件、程序、版面设计等，均受知识产权法保护。未经本平台书面许可，用户不得复制、传播、修改或用于商业用途。</p>

            <h2>6. 隐私保护</h2>
            <p>本平台高度重视用户隐私保护，具体内容请参见《隐私政策》。用户同意本平台按照隐私政策的约定收集、使用、存储用户信息。</p>

            <h2>7. 服务变更与终止</h2>
            <h3>7.1 服务变更</h3>
            <p>本平台有权根据业务发展需要，对服务内容进行调整、更新或优化。重大变更将提前通知用户。</p>

            <h3>7.2 服务终止</h3>
            <p>在以下情况下，本平台有权终止向用户提供服务：</p>
            <ul>
              <li>用户违反本协议约定</li>
              <li>用户长期未使用账户</li>
              <li>因技术原因或不可抗力因素</li>
              <li>其他法律法规规定的情形</li>
            </ul>

            <h2>8. 免责声明</h2>
            <p>本平台不对以下情况承担责任：</p>
            <ul>
              <li>因不可抗力导致的服务中断或数据丢失</li>
              <li>用户因违反本协议而产生的损失</li>
              <li>第三方行为导致的损失</li>
              <li>用户设备故障或网络问题导致的服务异常</li>
            </ul>

            <h2>9. 争议解决</h2>
            <p>因本协议产生的争议，双方应友好协商解决。协商不成的，任何一方均可向本平台所在地有管辖权的人民法院提起诉讼。</p>

            <h2>10. 其他条款</h2>
            <p>本协议的效力、解释、变更、执行与争议解决均适用中华人民共和国法律。如本协议中的任何条款被认定为无效或不可执行，其余条款仍然有效。</p>

            <div class="important">
              <strong>特别提醒：</strong>本协议自用户点击同意之日起生效。本平台保留随时修改本协议的权利，修改后的协议将在平台上公布。用户继续使用服务即视为接受修改后的协议。
            </div>
          </div>

          <!-- 隐私政策内容 -->
          <div class="modal-section" :class="{ active: activeModalSection === 'privacy' }">
            <h1>秒解几何隐私政策</h1>

            <div class="info-box">
              <strong>隐私承诺：</strong>秒解几何深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们承诺严格按照本隐私政策处理您的个人信息。
            </div>

            <h2>1. 信息收集</h2>
            <h3>1.1 我们收集的信息类型</h3>
            <p>为了向您提供更好的服务，我们可能会收集以下信息：</p>
            <ul>
              <li><strong>账户信息：</strong>姓名、邮箱地址、手机号码</li>
              <li><strong>教育信息：</strong>学校名称、年级、数学水平</li>
              <li><strong>设备信息：</strong>设备型号、操作系统、浏览器类型</li>
              <li><strong>使用数据：</strong>学习记录、练习结果、访问日志</li>
              <li><strong>位置信息：</strong>大致地理位置（仅用于改善服务体验）</li>
            </ul>

            <h3>1.2 信息收集方式</h3>
            <p>我们通过以下方式收集信息：</p>
            <ul>
              <li>您直接提供的信息（注册、填写资料等）</li>
              <li>您使用服务时自动收集的信息</li>
              <li>通过Cookie和类似技术收集的信息</li>
              <li>来自第三方平台的授权信息</li>
            </ul>

            <h2>2. 信息使用</h2>
            <p>我们收集您的个人信息主要用于：</p>
            <ul>
              <li>提供、维护和改进我们的服务</li>
              <li>个性化学习内容和推荐</li>
              <li>分析学习效果和进度跟踪</li>
              <li>客户服务和技术支持</li>
              <li>安全防护和风险控制</li>
              <li>法律合规和纠纷解决</li>
            </ul>

            <h2>3. 信息共享</h2>
            <h3>3.1 共享原则</h3>
            <p>我们不会向第三方出售、出租或以其他方式披露您的个人信息，除非：</p>
            <ul>
              <li>获得您的明确同意</li>
              <li>法律法规要求或政府部门要求</li>
              <li>为保护本平台或用户的合法权益</li>
              <li>与可信赖的合作伙伴共享（仅限于提供服务所必需）</li>
            </ul>

            <h3>3.2 合作伙伴</h3>
            <p>我们可能与以下类型的合作伙伴共享必要信息：</p>
            <ul>
              <li>技术服务提供商</li>
              <li>数据分析合作伙伴</li>
              <li>支付服务提供商</li>
              <li>教育内容提供商</li>
            </ul>

            <h2>4. 信息存储</h2>
            <h3>4.1 存储地点</h3>
            <p>您的个人信息将存储在中华人民共和国境内。如需跨境传输，我们将严格按照相关法律法规执行。</p>

            <h3>4.2 存储期限</h3>
            <p>我们仅在实现本隐私政策所述目的所需的期间内保留您的个人信息，具体期限如下：</p>
            <ul>
              <li>账户信息：账户注销后30天内删除</li>
              <li>学习记录：保存至账户注销后1年</li>
              <li>日志信息：保存时间不超过12个月</li>
              <li>其他信息：按照法律法规要求的最短期限</li>
            </ul>

            <h2>5. 信息安全</h2>
            <p>我们采取多重安全措施保护您的个人信息：</p>
            <ul>
              <li>数据加密传输和存储</li>
              <li>访问权限控制和身份验证</li>
              <li>定期安全检查和漏洞修复</li>
              <li>员工信息安全培训</li>
              <li>第三方安全认证</li>
            </ul>

            <div class="important">
              <strong>安全提醒：</strong>尽管我们采取了各种安全措施，但请注意，任何网络传输和存储都无法保证100%的安全。请妥善保管您的账户信息，避免向他人泄露。
            </div>

            <h2>6. 您的权利</h2>
            <p>根据相关法律法规，您享有以下权利：</p>
            <ul>
              <li><strong>访问权：</strong>查询您的个人信息</li>
              <li><strong>更正权：</strong>更正错误或不完整的信息</li>
              <li><strong>删除权：</strong>要求删除您的个人信息</li>
              <li><strong>限制处理权：</strong>限制我们处理您的个人信息</li>
              <li><strong>数据可携带权：</strong>获取您的个人信息副本</li>
              <li><strong>撤回同意权：</strong>撤回您此前给予的同意</li>
            </ul>

            <h2>7. 未成年人保护</h2>
            <p>我们特别关注未成年人的个人信息保护：</p>
            <ul>
              <li>未满14周岁的用户需要在监护人同意下使用服务</li>
              <li>我们不会主动收集未成年人的个人信息</li>
              <li>如发现收集了未成年人信息，将立即删除</li>
              <li>监护人有权查看和管理未成年人的信息</li>
            </ul>

            <h2>8. Cookie和类似技术</h2>
            <p>我们使用Cookie和类似技术来：</p>
            <ul>
              <li>记住您的登录状态</li>
              <li>分析网站使用情况</li>
              <li>提供个性化服务</li>
              <li>改善用户体验</li>
            </ul>
            <p>您可以通过浏览器设置管理Cookie，但这可能影响某些功能的正常使用。</p>

            <h2>9. 第三方服务</h2>
            <p>我们的服务可能包含第三方链接或服务，这些第三方有自己的隐私政策。我们建议您仔细阅读这些第三方的隐私政策，我们不对第三方的隐私做法承担责任。</p>

            <h2>10. 政策更新</h2>
            <p>我们可能会适时更新本隐私政策。重大变更将通过以下方式通知您：</p>
            <ul>
              <li>在网站首页发布公告</li>
              <li>向您的注册邮箱发送邮件</li>
              <li>通过站内信或推送通知</li>
            </ul>

            <div class="contact-info">
              <h3>联系我们</h3>
              <p>如果您对本隐私政策有任何疑问或需要行使您的权利，请通过以下方式联系我们：</p>
              <p><strong>邮箱：</strong> scnu@miaojiejihe.com</p>
              <p><strong>电话：</strong> 400-123-4567</p>
              <p><strong>地址：</strong> 广东省佛山市华南师范大学南海校区</p>
              <p><strong>工作时间：</strong> 周一至周五 9:00-18:00</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import apiService from '../../services/apiService'
const isLoginForm = ref(true)
const showModalFlag = ref(false)
const activeModalSection = ref('terms')
const activeModalTitle = ref('用户协议')

const loginForm = ref({
  email: '',
  password: '',
  rememberMe: false
})

const loginErrors = ref({
  email: '',
  password: ''
})

const registerForm = ref({
  userName: '',
  email: '',
  phone: '',
  schoolName: '',
  grade: '',
  password: '',
  confirmPassword: '',
  mathLevel: '',
  agreeTerms: false,
  subscribedUpdates: false
})

const registerErrors = ref({

  userName: '',
  email: '',
  phone: '',
  schoolName: '',
  grade: '',
  password: '',
  confirmPassword: '',
  mathLevel: '',
  agreeTerms: ''
})

const gradeOptions = ref([
  { value: '7', label: '初一' },
  { value: '8', label: '初二' },
  { value: '9', label: '初三' },
  { value: '10', label: '高一' },
  { value: '11', label: '高二' },
  { value: '12', label: '高三' }
])

const toggleForm = () => {
  isLoginForm.value = !isLoginForm.value
  // 清空错误信息
  if (isLoginForm.value) {
    loginErrors.value = { email: '', password: '' }
  } else {
    registerErrors.value = {

      userName: '',
      email: '',
      phone: '',
      schoolName: '',
      grade: '',
      password: '',
      confirmPassword: '',
      mathLevel: '',
      agreeTerms: ''
    }
  }
}

const showModal = (type) => {
  showModalFlag.value = true
  showModalSection(type)
  document.body.style.overflow = 'hidden'
}

const closeModal = () => {
  showModalFlag.value = false
  document.body.style.overflow = 'auto'
}

const showModalSection = (sectionId) => {
  activeModalSection.value = sectionId
  activeModalTitle.value = sectionId === 'terms' ? '用户协议' : '隐私政策'
}

const validateLoginForm = () => {
  let isValid = true
  loginErrors.value = { email: '', password: '' }

  // 邮箱验证
  if (!loginForm.value.email.trim()) {
    loginErrors.value.email = '此字段为必填项'
    isValid = false
  } else {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(loginForm.value.email)) {
      loginErrors.value.email = '请输入有效的邮箱地址'
      isValid = false
    }
  }

  // 密码验证
  if (!loginForm.value.password) {
    loginErrors.value.password = '此字段为必填项'
    isValid = false
  } else if (loginForm.value.password.length < 6) {
    loginErrors.value.password = '密码长度至少为6位'
    isValid = false
  }

  return isValid
}

const validateRegisterForm = () => {
  let isValid = true
  registerErrors.value = {

    userName: '',
    email: '',
    phone: '',
    schoolName: '',
    grade: '',
    password: '',
    confirmPassword: '',
    mathLevel: '',
    agreeTerms: ''
  }

  // 用户名验证

  if (!registerForm.value.userName.trim()) {
    registerErrors.value.userName = '此字段为必填项'
    isValid = false
  }

  // 邮箱验证
  if (!registerForm.value.email.trim()) {
    registerErrors.value.email = '此字段为必填项'
    isValid = false
  } else {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(registerForm.value.email)) {
      registerErrors.value.email = '请输入有效的邮箱地址'
      isValid = false
    }
  }

  // 手机号验证
  if (!registerForm.value.phone.trim()) {
    registerErrors.value.phone = '此字段为必填项'
    isValid = false
  } else {
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(registerForm.value.phone)) {
      registerErrors.value.phone = '请输入有效的手机号码'
      isValid = false
    }
  }

  // 学校验证
  if (!registerForm.value.schoolName.trim()) {
    registerErrors.value.schoolName = '此字段为必填项'
    isValid = false
  }

  // 年级验证
  if (!registerForm.value.grade) {
    registerErrors.value.grade = '请选择您的年级'
    isValid = false
  }

  // 密码验证
  if (!registerForm.value.password) {
    registerErrors.value.password = '此字段为必填项'
    isValid = false
  } else if (registerForm.value.password.length < 6) {
    registerErrors.value.password = '密码长度至少为6位'
    isValid = false
  }

  // 确认密码验证
  if (!registerForm.value.confirmPassword) {
    registerErrors.value.confirmPassword = '此字段为必填项'
    isValid = false
  } else if (registerForm.value.password !== registerForm.value.confirmPassword) {
    registerErrors.value.confirmPassword = '两次输入的密码不一致'
    isValid = false
  }

  // 数学水平验证
  if (!registerForm.value.mathLevel) {
    registerErrors.value.mathLevel = '请选择您的数学水平'
    isValid = false
  }

  // 协议同意验证
  if (!registerForm.value.agreeTerms) {
    registerErrors.value.agreeTerms = '请阅读并同意用户协议和隐私政策'
    isValid = false
  }
  console.log(registerErrors.value);
  

  return isValid
}

const handleLogin = async() => {
  if (validateLoginForm()) {
    console.log('登录数据:', loginForm.value)
    let resp=await apiService.sendRequest('/user/login', 'POST', loginForm.value);
  }
}

const handleRegister =  async() => {
  if (validateRegisterForm()) {
    // console.log('注册数据:', registerForm.value)
    let resp=await apiService.sendRequest('/user/register', 'POST', registerForm.value);
    if (resp.code!==1){
      alert("注册失败")
      return;
    }
    alert('注册成功！请登录');
    toggleForm();


  } else {
    console.log("失败")
  }
}

const showForgotPassword = () => {
  const email = prompt('请输入您的邮箱地址，我们将发送重置密码链接：')
  if (email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (emailRegex.test(email)) {
      alert('重置密码链接已发送到您的邮箱，请查收！')
    } else {
      alert('请输入有效的邮箱地址')
    }
  }
}

const socialLogin = (platform) => {
  alert(`${platform === 'wechat' ? '微信' : '支付宝'}登录需要后端API配合实现`)
}

// ESC键关闭模态框
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && showModalFlag.value) {
    closeModal()
  }
})
</script>




<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#my-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  min-height: 600px;
  display: flex;
  position: relative;
}

.left-panel {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.logo {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667eea;
  font-weight: bold;
}

.welcome-text {
  font-size: 24px;
  margin-bottom: 15px;
  font-weight: 600;
}

.welcome-desc {
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 30px;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.9;
}

.feature-icon {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.right-panel {
  flex: 1;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;
}

.form-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.form-subtitle {
  color: #666;
  font-size: 16px;
}

.form-container {
  position: relative;
}

.form {
  display: none;
}

.form.active {
  display: block;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 15px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input::placeholder {
  color: #aaa;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-row .form-group {
  flex: 1;
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.form-switch {
  text-align: center;
  margin-top: 30px;
  color: #666;
}

.form-switch button {
  background: none;
  border: none;
  color: #667eea;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.form-switch button:hover {
  color: #764ba2;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.checkbox-group label {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.checkbox-group a {
  color: #667eea;
  text-decoration: none;
  cursor: pointer;
}

.checkbox-group a:hover {
  text-decoration: underline;
}

.divider {
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e1e5e9;
}

.divider span {
  padding: 0 20px;
  color: #666;
  font-size: 14px;
}

.social-login {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.social-btn {
  flex: 1;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}

.social-btn:hover {
  border-color: #667eea;
  background: #f8f9fa;
}

.grade-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.grade-option {
  padding: 10px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8f9fa;
  font-size: 14px;
}

.grade-option:hover {
  border-color: #667eea;
  background: white;
}

.grade-option.selected {
  border-color: #667eea;
  background: #667eea;
  color: white;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 5px;
}

.success-message {
  color: #27ae60;
  font-size: 14px;
  margin-top: 5px;
}

/* Modal样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-out;
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease-out;
}

.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-tabs {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e5e9;
}

.modal-tab {
  flex: 1;
  padding: 15px;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  color: #666;
}

.modal-tab.active {
  background: white;
  color: #667eea;
  border-bottom: 2px solid #667eea;
}

.modal-tab:hover:not(.active) {
  background: #e9ecef;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.modal-section {
  display: none;
}

.modal-section.active {
  display: block;
}

.modal-body h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.modal-body h2 {
  font-size: 18px;
  color: #667eea;
  margin: 25px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e1e5e9;
}

.modal-body h3 {
  font-size: 16px;
  color: #333;
  margin: 20px 0 10px 0;
}

.modal-body p {
  margin-bottom: 12px;
  text-align: justify;
  color: #555;
  line-height: 1.6;
}

.modal-body ul,
.modal-body ol {
  margin: 12px 0;
  padding-left: 25px;
}

.modal-body li {
  margin-bottom: 6px;
  color: #555;
  line-height: 1.5;
}

.highlight {
  background: #fff3cd;
  padding: 12px;
  border-left: 4px solid #ffc107;
  margin: 15px 0;
  border-radius: 5px;
  font-size: 14px;
}

.important {
  background: #f8d7da;
  padding: 12px;
  border-left: 4px solid #dc3545;
  margin: 15px 0;
  border-radius: 5px;
  font-size: 14px;
}

.info-box {
  background: #d1ecf1;
  padding: 12px;
  border-left: 4px solid #17a2b8;
  margin: 15px 0;
  border-radius: 5px;
  font-size: 14px;
}

.contact-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  border: 1px solid #dee2e6;
  font-size: 14px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    max-width: 400px;
  }

  .left-panel {
    padding: 40px 20px;
  }

  .right-panel {
    padding: 40px 20px;
  }

  .form-row {
    flex-direction: column;
  }

  .social-login {
    flex-direction: column;
  }

  .modal-content {
    width: 95%;
    max-height: 95vh;
  }

  .modal-body {
    padding: 20px;
  }

  .modal-tabs {
    flex-direction: column;
  }
}
</style>